<template>
  <el-drawer title="设置轮播图" v-model="dialogVisible" size="50%"  :destroy-on-close="true" >
    <el-form :model="form" ref="" label-width="80px" >
      <el-form-item label="轮播图">
        <ChooseImage :limit="5" v-model="form.banners"></ChooseImage>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit" :loading="loading">提交</el-button>
      </el-form-item>
    </el-form>
    
  </el-drawer>
  
</template>

<script setup>
import { reactive, ref } from 'vue'
import ChooseImage from '~/components/ChooseImage.vue'
import { readGoods,setGoodsBanner } from '~/api/goods.js'
import { toast } from "~/composables/util.js";

const dialogVisible = ref(false)
const form = reactive({
  banners:[]
})

const goodsId = ref(0)
const open =(row)=>{
  //console.log(row);
  goodsId.value = row.id
  row.bannersLoading = true
  readGoods(goodsId.value)
  .then(res=>{
    //console.log(res.goodsBanner.map(o=>o.url));
    form.banners = res.goodsBanner.map(o=>o.url)
    dialogVisible.value = true
  }).finally(()=>{
    row.bannersLoading = false
  })
  
}

const emit = defineEmits(["reloadData"])
const loading = ref(false)
const submit =()=>{
  loading.value = true
  setGoodsBanner(goodsId.value,form)
  .then(res=>{
    toast("设置轮播图成功")
    dialogVisible.value = false
    emit("reloadData")
    
  }).finally(()=>[
    loading.value = false
  ])
}

defineExpose({
  open
})
</script>

<style lang='scss'>
</style>